import PropTypes from "prop-types"
import React, { memo, useCallback, useEffect } from "react"
import { RoomsWrapper } from "./style"
import RoomItem from "@/components/room-item"
import { useNavigate } from "react-router-dom"
import { useDispatch } from "react-redux"
import { changeDetailInfo } from "@/store/modules/detail"

const EntireRooms = memo((props) => {
    /**接收数据 */
    const { infoData, totalCount, isloading } = props
    /**事件处理逻辑 */
    const navigate = useNavigate()
    const dispatch = useDispatch()
    const itemClick = useCallback(
        (item) => {
            dispatch(changeDetailInfo(item))
            navigate("/detail")
        },
        [navigate, dispatch]
    )
    return (
        <RoomsWrapper>
            <h2 className="title">{totalCount}多处住所</h2>
            <div className="list">
                {infoData.map((item) => {
                    return (
                        <RoomItem
                            itemData={item}
                            itemwidth="20%"
                            key={item._id}
                            itemClick={itemClick}
                        />
                    )
                })}
            </div>
            {isloading && <div className="cover"></div>}
        </RoomsWrapper>
    )
})

EntireRooms.propTypes = {
    infoData: PropTypes.array,
    totalCount: PropTypes.number,
    isloading: PropTypes.bool,
}

export default EntireRooms
